<button class="btn btn-dark" (click)="toTopOfScreen()" id="toTopButton" title="Go to top">
    <img class="img-fluid cardIcon" id="topBtn" src="{{'assets/images/btn_arrow.png'}}">
</button>
<div *ngIf="isLoaded == false" class="loader">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>

<div class="row justify-content-center">
    <div *ngIf="lang == 'zh'" class="col-10 text-center bg-dark p-4 my-2">
        <h5>技能数值的资料参考自：</h5>
        <a class="smallFont" href="https://bbs.nga.cn/read.php?tid=26103617" target="_blank">[攻略] [技能] 法考真题全攻略——思绪技能详解</a><br />
        <a class="smallFont" href="https://bbs.nga.cn/read.php?tid=25852781" target="_blank">[硬核攻略] [我们的目标是变强]
            养卡宝典：全图鉴战斗数值资料库excel+自选卡组计算加成后说服力/技能升级潜力</a><br />
        <a class="smallFont" href="https://bbs.nga.cn/read.php?tid=25503032" target="_blank">自用《未定卡牌技能表》excel分享，欢迎下载随心二改</a>
    </div>
    <div *ngIf="lang == 'en'" class="col-10 text-center bg-dark p-4 my-2">
        <p>The information of skill that not being implemented in Global server will remain in Chinese</p>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-12 col-md-10 row justify-content-evenly">
        <div class="col">
            <label for="character">{{'KEYWORD.CHARACTER' | translate}}</label>
            <select [(ngModel)]="filterConditions[0]" (ngModelChange)="filterSkillList()" class="custom-select"
                name="character">
                <option value="All">All</option>
                <option value="GENERAL">{{'KEYWORD.GENERAL' | translate}}</option>
                <option value="LUKE">{{'KEYWORD.LUKE' | translate}}</option>
                <option value="ARTEM">{{'KEYWORD.ARTEM' | translate}}</option>
                <option value="VYN">{{'KEYWORD.VYN' | translate}}</option>
                <option value="MARIUS">{{'KEYWORD.MARIUS' | translate}}</option>
            </select>
        </div>
        <!-- <div class="col">
            <label for="rarity">稀有度</label>
            <select [(ngModel)]="filterConditions[1]" (ngModelChange)="filterSkillList()" class="custom-select"
                name="rarity">
                <option value="All">All</option>
                <option value="R">R</option>
                <option value="MR">MR</option>
                <option value="SR">SR</option>
                <option value="SSR">SSR</option>
            </select>
        </div> -->
        <div class="col">
            <label for="type">{{'KEYWORD.TYPE' | translate}}</label>
            <select [(ngModel)]="filterConditions[2]" (ngModelChange)="filterSkillList()" class="custom-select"
                name="type">
                <option value="All">All</option>
                <option value="GENERAL">{{'KEYWORD.GENERAL' | translate}}</option>
                <option value="LOGIC">{{'KEYWORD.LOGIC' | translate}}</option>
                <option value="EMPATHY">{{'KEYWORD.EMPATHY' | translate}}</option>
                <option value="INTUITION">{{'KEYWORD.INTUITION' | translate}}</option>
            </select>
        </div>
        <div class="col">
            <label for="function">{{'KEYWORD.FUNCTION' | translate}}</label>
            <select [(ngModel)]="filterConditions[3]" (ngModelChange)="filterSkillList()" class="custom-select"
                name="function">
                <option value="All">All</option>
                <option value="damage up">{{'KEYWORD.DAMAGE-UP' | translate}}</option>
                <option value="influence up">{{'KEYWORD.INFLUENCE-UP' | translate}}</option>
                <option value="defense up">{{'KEYWORD.DEFENSE-UP' | translate}}</option>
                <option value="influence down">{{'KEYWORD.INFLUENCE-DOWN' | translate}}</option>
                <option value="defense down">{{'KEYWORD.DEFENSE-DOWN' | translate}}</option>
                <option value="support">{{'KEYWORD.SUPPORT' | translate}}</option>
            </select>
        </div>
        <div class="col">
            <label for="slot">{{'KEYWORD.SKILL-SLOT' | translate}}</label>
            <select [(ngModel)]="filterConditions[4]" (ngModelChange)="filterSkillList()" class="custom-select"
                name="slot">
                <option value="All">All</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="col-1">
            <a (click)="resetFilters()">
                <img src="assets/images/btn_reset.png">
            </a>
        </div>
    </div>
    <div class="col-12 col-md-10 my-2">
        <table class="table table-sm table-dark text-center">
            <tr>
                <th rowspan="2">{{'KEYWORD.ICON' | translate}}</th>
                <th rowspan="2">{{'KEYWORD.NAME' | translate}}</th>
                <th colspan="2" class="d-none d-sm-table-cell">{{'KEYWORD.CARD' | translate}}</th>
                <th rowspan="2">{{'KEYWORD.DESCRIPTION' | translate}}</th>
                <th colspan="2">{{'KEYWORD.STATISTICS' | translate}}</th>
            </tr>
            <tr>
                <th class="d-none d-sm-table-cell">{{'KEYWORD.TYPE' | translate}}</th>
                <th class="d-none d-sm-table-cell">{{'KEYWORD.RARITY' | translate}}</th>
                <th>LV1</th>
                <th>LV10</th>
            </tr>
            <tr *ngFor="let s of skillList">
                <td>
                    <a [routerLink]="['/skill/']" [queryParams]="{id: s._id}" target="_blank">
                        <img style="height: 50px; width: 50px;" src="{{imgURL + '技能/' + s.ref + '.webp'}}">
                    </a>
                </td>
                <td>
                    <a [routerLink]="['/skill/']" [queryParams]="{id: s._id}" target="_blank">
                        {{s.n}}
                    </a>
                </td>
                <!-- <td class="d-none d-sm-table-cell">{{'KEYWORD.' + s.character | translate}}</td> -->
                <td class="d-none d-sm-table-cell"><img class="icon img-fluid"
                        src="{{'assets/images/' + s.type + '.png'}}"></td>
                <td class="d-none d-sm-table-cell">{{s.rarity}}</td>
                <td class="smallFont">{{s.des}}</td>
                <td *ngFor="let n of s.nums">{{n}}</td>
            </tr>
        </table>
    </div>
</div>